<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <title></title>
    <link href="../../css/lanai-ui.css" rel="stylesheet"/>
</head>
<body>
<section class="content no-padding">
    <div class="box box-widget no-shadow">
        <div class="box-body">
            <blockquote class="bg-gray-light blockquote-success">
                注意 : 提供两种主要布局(此Demo提供的是左右式布局)

                <small>查看<a href="#">上下式布局</a></small>
            </blockquote>

            <div class="row">
                <div class="col-sm-6">
                    <h3>上下式布局</h3>
                    <p>
                        在页面代码<code>body</code>样式中增加<code>.layout-top-nav</code>样式
                    </p>
                    <a href="../../top_nav.html" target="_blank">
                        <img class="img-responsive" src="../../img/demo2.png"/></a>
                </div>
                <div class="col-sm-6">
                    <h3>左右式布局</h3>
                    <p> 在页面代码<code>body</code>中使用<code>.hold-transition .skin-blue .layout-top-nav</code></p>
                    <img class="img-responsive" src="../../img/demo1.png"/>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/lanai-ui.js"></script>
</html>
